import 'package:flutter/material.dart';
import 'package:flutter_pickers/pickers.dart';
import 'package:flutter_pickers/style/default_style.dart';
import 'package:flutter_pickers/time_picker/model/date_mode.dart';
import 'package:flutter_pickers/time_picker/model/pduration.dart';
import 'package:flutter_pickers/time_picker/model/suffix.dart';
import 'package:flutter_pickers/utils/check.dart';
import 'package:get/get.dart';
import '../../../../widgets/my_text_widget.dart';
import '../controllers/add_course_controller.dart';

class AddCourseView extends GetView<AddCourseController> {
  final rightIcon = Icon(Icons.keyboard_arrow_right);
  // AddCourseView({Key? key}) : super(key: key);
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        leading: IconButton(
          icon: Icon(
            Icons.arrow_back_ios,
            color: Color.fromARGB(255, 50, 50, 50),
          ),
          onPressed: Get.back, //controller.turnHOME,
        ),
        title: Text(
          '添加课程',
          style: TextStyle(
            fontWeight: FontWeight.w600,
          ),
        ),
        centerTitle: true,
        actions: [
          Padding(
            padding: EdgeInsets.fromLTRB(0.0, 11.0, 8.0, 11.0),
            child: ElevatedButton(
                child: Text('提交'),
                onPressed: () {
                  if (controller.validate()) {
                    print(controller.validate);
                    print(controller.name.text);
                    controller.handleSubmit();
                  }
                }),
          ),
        ],
      ),
      body: controller.obx(
        (state) => ListView(
          children: [
            _dateItem(
              title: '上课时间',
              required: true,
              obs: controller.schoolTime,
              pickerStyle: DefaultPickerStyle(haveRadius: true, title: '上课时间'),
              mode: controller.mode,
              context: context,
            ),
            _dateItem(
              title: '下课时间',
              required: true,
              obs: controller.finishTime,
              pickerStyle: DefaultPickerStyle(haveRadius: true, title: '下课时间'),
              mode: controller.mode,
              context: context,
            ),
          ],
        ),
        onError: (err) {
          return Text('$err');
        },
        onLoading: Container(
          width: double.infinity,
          height: double.infinity,
          child: Column(
            mainAxisAlignment: MainAxisAlignment.center,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              CircularProgressIndicator(),
              SizedBox(height: 10),
              Text(
                "疯狂加载中...",
                style: TextStyle(color: Colors.blue, fontSize: 16),
              ),
            ],
          ),
        ),
      ),
    );
  }

  /// 时间选择器
  Widget _dateItem({title, required, obs, pickerStyle, mode, context}) {
    return Obx(() {
      if (controller.isVerify.value) {
        return Column(
          children: [
            Container(
              child: ListTile(
                title: Row(children: [
                  Text(
                    required ? '*' : '',
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                  Text(title)
                ]),
                subtitle: !PicketUtil.strEmpty(obs[mode])
                    ? null
                    : Text(
                        '请填写"$title"!',
                        style: TextStyle(
                          color: Colors.red,
                        ),
                      ),
                onTap: () {
                  _onClickDateItem(mode, obs, pickerStyle, context);
                },
                trailing:
                    Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                      MyText(PicketUtil.strEmpty(obs[mode]) ? '' : obs[mode],
                      color: Colors.grey, rightpadding: 18),
                      rightIcon
                ]),
              ),
            ),
          ],
        );
      } else {
        return Column(
          children: [
            Container(
              child: ListTile(
                title: Row(children: [
                  Text(
                    required ? '*' : '',
                    style: TextStyle(
                      color: Colors.red,
                    ),
                  ),
                  Text(title)
                ]),
                onTap: () {
                  _onClickDateItem(mode, obs, pickerStyle, context);
                },
                trailing:
                    Row(mainAxisSize: MainAxisSize.min, children: <Widget>[
                      MyText(PicketUtil.strEmpty(obs[mode]) ? '' : obs[mode],
                      color: Colors.grey, rightpadding: 18),
                      rightIcon
                ]),
              ),
            ),
          ],
        );
      }
    });
  }

  /// 点击选项弹出时间选择器
  void _onClickDateItem(mode, obs, pickerStyle, context) {
    Pickers.showDatePicker(
      context,
      mode: mode,
      suffix: Suffix.normal(),
      pickerStyle: pickerStyle,
      // selectDate: PDuration(month: 2), // 设置选中的时间
      minDate: PDuration(year: 2020, month: 1, day: 1),
      // 设置最小时间
      // maxDate: PDuration(second: 22), // 设置最大可设置时间

      onConfirm: (p) {
        switch (mode) {
          case DateMode.YMDHMS:
            obs[mode] =
                '${p.year}-${p.month}-${p.day} ${p.hour}:${p.minute}:${p.second}';
            break;
          case DateMode.YMDHM:
            obs[mode] = '${p.year}-${p.month}-${p.day} ${p.hour}:${p.minute}';
            break;
          case DateMode.YMDH:
            obs[mode] = '${p.year}-${p.month}-${p.day} ${p.hour}';
            break;
          case DateMode.YMD:
            obs[mode] = '${p.year}-${p.month}-${p.day}';
            break;
          case DateMode.YM:
            obs[mode] = '${p.year}-${p.month}';
            break;
          case DateMode.Y:
            obs[mode] = '${p.year}-${p.month}';
            break;
          case DateMode.MDHMS:
            obs[mode] = '${p.month}-${p.day} ${p.hour}:${p.minute}:${p.second}';
            break;
          case DateMode.HMS:
            obs[mode] = '${p.hour}:${p.minute}:${p.second}';
            break;
          case DateMode.MD:
            obs[mode] = '${p.month}-${p.day}';
            break;
          case DateMode.S:
            obs[mode] = '${p.second}';
            break;
        }
      },
      // onChanged: (p) => print(p), // 值改变事件
    );
  }
}
